<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<%@ include file="/jsp/head.jsp"%>
<%@ include file="/jsp/jslib.jsp"%>
<script type="text/javascript">
PAGE_CONFIG = {
	'MENU_INDEX' : 1,'LI_INDEX' : 1
};
</script>
</head>

<body>
<%@ include file="/jsp/banner.jsp"%>
<div class="am-cf admin-main">
    <%@ include file="/jsp/menu.jsp"%>
	<!-- content start -->
	<div class="admin-content">
		<div class="admin-content-body">
		
		<!-- ***** 分离出去 动态加载 start ***** -->
		
		<div class="admin-content-body">
    <div class="am-cf am-padding am-padding-bottom-0">
      <div class="am-fl am-cf">
        <strong class="am-text-primary am-text-lg">运维</strong>
        <!-- / <small>addProject</small> -->
      </div>
    </div>

    <hr>

    <form class="am-form" id="form0" action="${ctx}/projectRepaird/doSave" method="post">
    <input type="hidden" name="pafrolUpdateListJson" />
    <input type="hidden" name="pafrolInsertListJson" />
    <input type="hidden" name="repairdUpdateListJson" />
    <input type="hidden" name="repairdInsertListJson" />
    <input type="hidden" name="projectId" id="projectId" value="${projectId}">
    <div class="am-tabs am-margin" data-am-tabs>
        <ul class="am-tabs-nav am-nav am-nav-tabs">
            <!-- <li class="am-active"><a href="#tab1">项目详细信息</a></li> -->
        </ul>

        <div class="am-tabs-bd">

            <div class="am-tab-panel am-fade am-in am-active" id="tab1">
    
    			<div class="am-g am-margin-top">
    	            <div class="am-u-sm-4 am-u-md-2 am-text-right"> 巡检提醒 </div>
    	            <div class="am-u-sm-8 am-u-md-10">
    	            	<button type="button" onclick="add1(this)" class="am-btn am-btn-default"><span class="am-icon-plus"></span>添加 </button>
    		             <table id="table1" class="am-table am-table-bd am-table-striped admin-content-table">
    			            <thead>
    				            <tr>
                                    <th hidden>ID</th>
                                    <th>待办事项</th>
                                    <th><div class="am-u-md-10">巡检日期</div></th>
                                    <th>是否完成</th>
                                    <th>负责人</th>
    				            </tr>
    			            </thead>
    			            <tbody>
                                <c:forEach var="i" items="${projectPafrolRecordList}" varStatus="s">
    				            <tr x-update>
                                    <td hidden>
                                        <input type="hidden" name="patrolId" value="${i.patrolId}" />
                                    </td>
    				            	<td>
                                        <input type="text" name="nextSomething" class="am-input-sm" value="${i.nextSomething}">
                                    </td>
    				            	<td>
                                        <div class="am-u-md-10">
                                        <input type="date" name="patrolDate" class="am-form-field am-input-sm" placeholder="时间" value='<fmt:formatDate value="${i.patrolDate}" pattern="yyyy-MM-dd"/>'>
                                        </div>
                                    </td> 
    				            	<td>
                                        <label class="am-checkbox">
                                        <input type="checkbox" name="isComplete" value="Y" ${i.isComplete == 'Y' ? 'checked' : ''} data-am-ucheck />
                                        </label>
                                    </td>
    				              	<td>
                                        <select data-am-selected="{btnSize: 'sm'}" name="staffId">
                                            <option value="">请选择</option> 
                                            <c:forEach items="${staffList}" var = "staff" >
                                                <option value="${staff.staffId}" <c:if test="${staff.staffId == i.staffId}">selected</c:if>>${staff.staffName}</option>
                                            </c:forEach>
                                        </select>
                                    </td> 
    				            </tr>
                                </c:forEach>
    			            </tbody>
    		          	</table>
    		        </div>
    			</div>
    			
    			<div class="am-g am-margin-top">
    	            <div class="am-u-sm-4 am-u-md-2 am-text-right"> 叫修记录 </div>
    	            <div class="am-u-sm-8 am-u-md-10">
    	            	<button type="button" onclick="add2(this)" class="am-btn am-btn-default"><span class="am-icon-plus"></span>添加 </button>
    		             <table id="table2" class="am-table am-table-bd am-table-striped admin-content-table">
    			            <thead>
    				            <tr>
                                    <th hidden>ID</th>
                                    <th>已做事项</th>
                                    <th><div class="am-u-md-10">维修日期</div></th>
                                    <th>负责人</th>
    				            </tr>
    			            </thead>
    			            <tbody>
                                <c:forEach var="i" items="${projectRepairRecodeList}" varStatus="s">
    				            <tr x-update>
                                    <td hidden>
                                        <input type="hidden" name="repairId" value="${i.repairId}" />
                                    </td>
    				            	<td>
                                        <input type="text" name="doneSomething" value="${i.doneSomething}" class="am-input-sm" />
                                    </td>
    				            	<td>
    									<div class="am-u-md-10">
    				              		<input type="date" name="repairDate" value="<fmt:formatDate value='${i.repairDate}' pattern='yyyy-MM-dd'/>" class="am-form-field am-input-sm" placeholder="时间">
    				              		</div>
    								</td>
    				            	<td>
                                        <select data-am-selected="{btnSize: 'sm',dropUp: 1}" name="staffId">
                                            <option value="">请选择</option> 
                                            <c:forEach items="${staffList}" var = "staff" >
                                                <option value="${staff.staffId}" <c:if test="${staff.staffId == i.staffId}">selected</c:if>>${staff.staffName}</option>
                                            </c:forEach>
                                        </select>
                                    </td>
    				            </tr>
                                </c:forEach>
    			            </tbody>
    		          	</table>
    		        </div>
    			</div>
    			
            </div>

        </div>
	    
	    <div class="am-margin">
	        <button type="button" onclick="submitForm()" class="am-btn am-btn-primary am-btn-sm am-margin-sm"> 保 存 </button>
	        <button type="button" onclick="goBack()" class="am-btn am-btn-primary am-btn-sm am-margin-sm"> 返 回 </button>
	    </div>
    </div>
    </form>

    
  </div>
		
		<!-- ***** 分离出去 动态加载 end ***** -->
	</div>
	<!-- content end -->
</div>
</div>
<!-- 以上页面内容 开发时删除 -->

<script type="text/javascript">
$(function(){
	//$('#collapse-nav1').addClass('am-in');
});
function goBack() {
	var projectId = $("#projectId").val();
	var url ="${ctx}/project/projectImplementFormPage?projectId="+projectId;
	location.href = url;
}
function add1(_this) {
	//if ($('#table1 tbody tr[x-insert]') && !$('#table1 tbody tr[x-insert]:last input[name=nextSomething]').val()) return;
    var tpl = Handlebars.compile($('#tpl-table1').html());
    $('#table1 tbody').append(tpl());
}
function add2(_this) {
	//if ($('#table2 tbody tr[x-insert]') && !$('#table2 tbody tr[x-insert]:last input[name=nextSomething]').val()) return;
	var tpl = Handlebars.compile($('#tpl-table2').html());
	$('#table2 tbody').append(tpl());
}
function submitForm() {
	var pafrolUpdateList = [];
	var pafrolInsertList = [];
	var repairdUpdateList = [];
	var repairdInsertList = [];
	$('#table1 tbody tr[x-update]').each(function(i, v){
		var oi = {};
		$(this).find('input').each(function(i, v){
			if (this.type == 'checkbox') {
			    oi[this.name] = this.checked ? 'Y' : 'N';				
			} else {
    			oi[this.name] = this.value;
			}
		});
		$(this).find('select').each(function(i, v){
			oi[this.name] = $(this).val();
        });
		pafrolUpdateList[i] = oi;
    });
	$('#table1 tbody tr[x-insert]').each(function(i, v){
        var oi = {};
        $(this).find('input').each(function(i, v){
        	if (this.type == 'checkbox') {
                oi[this.name] = this.checked ? 'Y' : 'N';               
            } else {
                oi[this.name] = this.value;
            }
        });
        $(this).find('select').each(function(i, v){
            oi[this.name] = $(this).val();
        });
        pafrolInsertList[i] = oi;
    });
	$('#table2 tbody tr[x-update]').each(function(i, v){
		var oi = {};
        $(this).find('input').each(function(i, v){
            oi[this.name] = this.value;
        });
        $(this).find('select').each(function(i, v){
            oi[this.name] = $(this).val();
        });
		repairdUpdateList[i] = oi;
	});
	$('#table2 tbody tr[x-insert]').each(function(i, v){
        var oi = {};
        $(this).find('input').each(function(i, v){
            oi[this.name] = this.value;
        });
        $(this).find('select').each(function(i, v){
            oi[this.name] = $(this).val();
        });
        repairdInsertList[i] = oi;
    });
	console.debug(pafrolUpdateList);
	console.debug(pafrolInsertList);
	console.debug(repairdUpdateList);
	console.debug(repairdInsertList);
	$('#form0 input[name=pafrolUpdateListJson]').val(JSON.stringify(pafrolUpdateList));
	$('#form0 input[name=pafrolInsertListJson]').val(JSON.stringify(pafrolInsertList));
	$('#form0 input[name=repairdUpdateListJson]').val(JSON.stringify(repairdUpdateList));
	$('#form0 input[name=repairdInsertListJson]').val(JSON.stringify(repairdInsertList));
	$('#form0')[0].submit();
}
</script>
<script id="tpl-table1" type="text/x-handlebars-template">
<tr x-insert>
    <td hidden>
        <input type="hidden" name="patrolId" value="" />
    </td>
    <td>
        <input type="text" name="nextSomething" class="am-input-sm" value="">
    </td>
    <td>
        <div class="am-u-md-10">
        <input type="date" name="patrolDate" class="am-form-field am-input-sm" placeholder="时间" value="">
        </div>
    </td> 
    <td>
        <label class="am-checkbox">
        <input type="checkbox" name="isComplete" value="" data-am-ucheck />
        </label>
    </td>
    <td>
        <select data-am-selected="{btnSize: 'sm',dropUp: 1}" name="staffId">
            <option value="">请选择</option> 
            <c:forEach items="${staffList}" var = "staff" >
                <option value="${staff.staffId}">${staff.staffName}</option>
            </c:forEach>
        </select>
    </td> 
</tr>
</script>
<script id="tpl-table2" type="text/x-handlebars-template">
<tr x-insert>
    <td hidden>
        <input type="hidden" name="repairId" value="" />
    </td>
    <td>
        <input type="text" name="doneSomething" value="" class="am-input-sm" />
    </td>
    <td>
        <div class="am-u-md-10">
        <input type="date" name="repairDate" class="am-form-field am-input-sm" placeholder="时间">
        </div>
    </td> 
    <td>
        <select data-am-selected="{btnSize: 'sm'}" name="staffId">
            <option value="">请选择</option> 
            <c:forEach items="${staffList}" var = "staff" >
                <option value="${staff.staffId}">${staff.staffName}</option>
            </c:forEach>
        </select>
    </td>
</tr>
</script>
</body>
</html>